<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/public/libs/codemirror/lib/codemirror.css"/>
    <link href="/static/public/libs/codemirror/theme/dracula.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/public/libs/codemirror/addon/hint/show-hint.css" />
    <link href="/static/admin/static/css/main.css" rel="stylesheet"/>
    <link href="/static/admin/pages/theme/css/edit.css" rel="stylesheet"/>
    <script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="/static/public/libs/layui-v2.5.6/layui/layui.all.js"></script>
    <script src="/static/public/libs/codemirror/lib/codemirror.js"></script>
    <script src="/static/public/libs/codemirror/mode/javascript/javascript.js"></script>
    <script src="/static/public/libs/codemirror/mode/xml/xml.js"></script>
    <script src="/static/public/libs/codemirror/mode/css/css.js"></script>
    <script src="/static/public/libs/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/anyword-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/show-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/html-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/css-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/xml-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/hint/javascript-hint.js"></script>
    <script src="/static/public/libs/codemirror/addon/selection/active-line.js"></script>
    <script src="/static/public/libs/codemirror/addon/fold/xml-fold.js"></script>
    <script src="/static/public/libs/codemirror/addon/edit/matchtags.js"></script>
</head>
<body class="layui-layout-body">
<div class="p-container layui-row">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">
                当前编辑文件: <b id="currEditFile">#(currEditFile??)</b>
                <button type="button"
                        class="layui-btn layui-btn-normal saveFileBtn">保存文件
                </button>
            </div>
            <div class="layui-card-body">
                <textarea class="form-control" id="code" name="code">#(content??)</textarea>
                <input type="hidden" value="#(theme.path??)" name="path" id="path">
                <input type="hidden" value="#(currEditFilePath??)" name="currEditFilePath" id="currEditFilePath">
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                当前编辑主题: <b>#(theme.name??)</b>
            </div>
            <div class="layui-card-body">
                <div id="fileList"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: 'text/html',
        theme: 'dracula',
        lineNumbers: true,
        styleActiveLine: true,
        matchTags: {bothTags: true},
        extraKeys: {"Alt-/": "autocomplete"},	// 高亮当前行
    });
    
    layui.use(['tree', 'util','form'], function(){
        var tree = layui.tree,layer = layui.layer,util = layui.util,form = layui.form;

        $.ajax({
            type: "POST",
            url: "/admin/theme/getFileListByTheme",
            data:  {path: $("#path").val()},
            success: function (d) {
                if (d.code === 200) {
                    tree.render({
                        elem: '#fileList',
                        data: d.data,
                        accordion: true,
                        text: {
                            none: '无数据'
                        },
                        click: function(obj){
                            if (obj.data.obj.fileType !== 'dir') {
                                loadFileContent(obj.data.obj.filePath, obj.data.obj.fileType,obj.data.obj.fileName);
                            }
                        }
                    });
                } else {
                    layer.msg("加载文件列表失败", {icon: 2});
                }
            },
            error: function () {
                layer.msg("加载文件列表失败", {icon: 2});
            }
        });
    });

    /**
     * 加载文件内容至编辑器
     * @param path
     * @param fileType
     * @param fileName
     */
    function loadFileContent(path,fileType,fileName) {
        let loadIndex = layer.load();
        $.ajax({
            type: "POST",
            url: "/admin/theme/getFileContent",
            data: {path: path},
            success: function (d) {
                layer.close(loadIndex);
                if (d.code === 200) {
                    editor.setValue(d.data);
                    $("#currEditFile").text(fileName);
                    $("#currEditFilePath").val(path);
                    switch (fileType) {
                        case 'html':
                            editor.setOption("mode","text/html");
                            break;
                        case 'css':
                            editor.setOption("mode","css");
                            break;
                        case 'js':
                            editor.setOption("mode","javascript");
                            break;
                    }
                } else {
                    layer.msg("加载文件失败", {icon: 2});
                }
            },
            error: function () {
                layer.close(loadIndex);
                layer.msg("加载文件失败", {icon: 2});
            }
        });
    }

    $(".p-container").on("click",".saveFileBtn",function () {
        let loadIndex = layer.load();
        $.ajax({
            type: "POST",
            url: "/admin/theme/saveFileContent",
            data: {path: $("#currEditFilePath").val(), content: editor.getValue()},
            success: function (d) {
                layer.close(loadIndex);
                if (d.code === 200) {
                    layer.msg("文件保存成功", {icon: 1});
                } else {
                    layer.msg("文件保存失败", {icon: 2});
                }
            },
            error: function () {
                layer.close(loadIndex);
                layer.msg("文件保存失败", {icon: 2});
            }
        });
    });

</script>
</body>
</html>